<template>
  <el-dialog
    title=""
    :visible.sync="centerDialogVisible"
    width="40%"
    @close="closeForm"
    center
  >
    <div>
      <div class="top">
        <h1>{{ruleForm.id===""?'添加':'修改'}}轮播图</h1>
      </div>
      <div class="content">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="轮播图标题:" prop="imgText">
            <el-input
              v-model="ruleForm.imgText"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="轮播图链接:" prop="url">
            <el-input
              v-model="ruleForm.url"
              placeholder="请输入链接"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加图片:"  prop="thumb">
            <div v-show="ruleForm.thumb !== ''" class="imageUl">
              <div style="position: relative">
                <el-image :src="ruleForm.imgScr" 
                :preview-src-list="
                showImg(ruleForm.imgScr)" class="avatar" /></el-image>
                <i
                  class="el-icon-error el-img-error"
                  @click="delLogo()"
                ></i>
              </div>
            </div>
            <el-upload
              style="overflow: hidden"
              class="avatar-uploader"
              :show-file-list= "false"
              action
              :http-request="LogoSuccess"
            >
              <i
                v-if="ruleForm.thumb === ''"
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="序号:"  prop="sort">
            <el-input
              type="number"
              class="sort_input"
              v-model="ruleForm.sort"
            ></el-input>
          </el-form-item>
          <el-form-item class="footer_btn">
            <div class="f_b">
              <el-button @click="closeForm()">取消</el-button>
            </div>
            <div class="f_b">
              <el-button type="primary" @click="submitForm('ruleForm')"
                >提交</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Popup",
  props: ["editImag"],
  data() {
    var sort = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("序号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(parseInt(value))) {
          callback(new Error("请输入序号"));
        } else {
          callback();
        }
      }, 1000);
    };
    var imgText = (rule, value, callback) => {
      if (!String(value).replace(/(^\s*)|(\s*$)/g, "")) {
        return callback(new Error("标题不能为空"));
      } else {
        callback();
      }
    };
    var imgScr = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("图片不能为空"));
      } else {
        callback();
      }
    };
    return {
      centerDialogVisible: false,
      logo: "",
      ruleForm: {
        id: "",
        sort: 1,
        imgText: "",
        url: "",
        thumb: "",
        imgScr: "",
      },
      rules: {
        sort: [{ validator: sort, trigger: "blur" }],
        imgText: [{ validator: imgText, trigger: "blur" }],
        imgScr: [{ validator: imgScr, trigger: "change" }],
      },
    };
  },
  watch: {
    centerDialogVisible(nvalue, ovalue) {
      if (nvalue && this.editImag.id) {
        this.ruleForm = {
          id: this.editImag.id ? this.editImag.id : "",
          sort: this.editImag.sort ? this.editImag.sort : 1,
          imgText: this.editImag.title ? this.editImag.title : "",
          url: this.editImag.url ? this.editImag.url : "",
          thumb: this.editImag.thumb ? this.editImag.thumb : "",
          imgScr: this.editImag.thumb ? this.editImag.thumb : "",
        };
      } else {
        this.ruleForm = this.$options.data().ruleForm;
      }
    },
  },
  methods: {
    // 大图预览
    showImg(img) {
      let imgArr = [];
      imgArr.push(img);
      return imgArr;
    },
    // 添加图片
    LogoSuccess(param) {
      this.$cmsapi.FileUpload(param.file).then((res) => {
        this.ruleForm.thumb = res.data.path;
        this.ruleForm.imgScr = res.data.url;
      }).catch((erro) => {
        console.log(erro);
      });
    },
    // 删除图片
    delLogo() {
      this.ruleForm.thumb = "";
      this.ruleForm.imgScr = "";
      this.$refs["ruleForm"].validate((valid) => {});
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("addImg", this.ruleForm);
          this.centerDialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消
    closeForm() {
      this.$refs["ruleForm"].clearValidate();
      this.centerDialogVisible = false;
    },
  },
};
</script>
<style scoped>
.sort_input {
  width: 15%;
}
/deep/ .el-dialog__body {
  padding-top: 0;
}
/* 底部按钮 */
.footer_btn /deep/ .el-form-item__content {
  display: flex;
  justify-content: center;
  margin-left: 0px !important;
}
</style>